import React from 'react';
import { List } from 'antd';
import Zcon from '@cbd/icon';
// import { Link } from "react-router-dom";
// import queryString from 'query-string';
import styles from './NoticeContent.less';

const getMsgTypeText = (msgTypes, msgType) => {
  const e = (msgTypes || []).find((item)=> (item.key === msgType));
  return e && e.value || '';
}

const NoticeContent = ({ msgTypes, data = [], count, onHiddenPopover = () => { } }) => {
  return (
    <div className={styles.content}>
      <div className={styles.item_con}>
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <a
              className={styles.link}
              onClick={(e) => { e.preventDefault(); onHiddenPopover(item) }}
            // to={{
            //   pathname: '/noticeflowdetail',
            //   search: queryString.stringify({
            //     processInstanceId: item.processInstanceId,
            //     actionId: item.id,
            //   }),
            // }}
            >
              <List.Item>
                <List.Item.Meta
                  avatar={<Zcon style={{ color: '#2766FF' }} type='track-straight' />}
                  title={
                    <div className={styles.item_title}>
                      <span>{getMsgTypeText(msgTypes, item.msgType)}</span>
                      <span className={styles.right}>
                        {item.relativeTime}
                      </span>
                    </div>
                  }
                  description={
                    <p className={styles.description}>
                      {item.description || item.msgBody || item.msgBoby || ''}
                    </p>
                  }
                />
              </List.Item>
            </a>
          )}
        />
      </div>
      <div
        onClick={() => {
          if (count === 0) {
            return;
          }
          onHiddenPopover();
        }}
        className={`${styles.con_bottom} ${count === 0 ? styles.disable : ''}`}
      >
        查看全部通知
      </div>
    </div>
  );
}

export default NoticeContent;